/**
 * Hot Topic Card Component
 * 热点话题卡片组件
 */
import React from 'react';
import { Card, Tag, Space, Button, Typography, Row, Col, Tooltip } from 'antd';
import { 
  FireOutlined, 
  CommentOutlined, 
  EditOutlined,
  RiseOutlined 
} from '@ant-design/icons';
import styles from './style.module.css';

const { Text, Title, Paragraph } = Typography;

interface HotTopicCardProps {
  rank: number;
  title: string;
  excerpt?: string;
  hotValue: number;
  commentCount?: number;
  onStartWriting: () => void;
  onViewComments?: () => void;
}

const HotTopicCard: React.FC<HotTopicCardProps> = ({
  rank,
  title,
  excerpt,
  hotValue,
  commentCount = 0,
  onStartWriting,
  onViewComments
}) => {
  // 格式化热度值
  const formatHotValue = (value: number): string => {
    if (value >= 100000000) {
      return `${(value / 100000000).toFixed(1)}亿`;
    } else if (value >= 10000) {
      return `${(value / 10000).toFixed(1)}万`;
    }
    return value.toString();
  };

  // 获取排名标签颜色
  const getRankColor = (rank: number): string => {
    if (rank === 1) return '#ff4d4f';
    if (rank === 2) return '#ff7a45';
    if (rank === 3) return '#ffa940';
    return '#8c8c8c';
  };

  return (
    <Card 
      className={styles.topicCard}
      hoverable
      actions={[
        <Button 
          type="primary" 
          icon={<EditOutlined />} 
          onClick={onStartWriting}
        >
          开始创作
        </Button>,
        commentCount > 0 && (
          <Button 
            icon={<CommentOutlined />} 
            onClick={onViewComments}
          >
            查看评论({commentCount})
          </Button>
        )
      ].filter(Boolean)}
    >
      <div className={styles.cardContent}>
        <Row align="middle" gutter={[16, 16]}>
          <Col span={24}>
            <Space align="start" style={{ width: '100%', justifyContent: 'space-between' }}>
              <Tag 
                color={getRankColor(rank)} 
                style={{ fontSize: '16px', padding: '4px 12px' }}
              >
                #{rank}
              </Tag>
              <Space>
                <Tooltip title="热度值">
                  <Tag icon={<FireOutlined />} color="volcano">
                    {formatHotValue(hotValue)}
                  </Tag>
                </Tooltip>
                {commentCount > 0 && (
                  <Tooltip title="评论数">
                    <Tag icon={<CommentOutlined />} color="blue">
                      {commentCount}
                    </Tag>
                  </Tooltip>
                )}
              </Space>
            </Space>
          </Col>
          
          <Col span={24}>
            <Title level={5} ellipsis={{ rows: 2 }} className={styles.topicTitle}>
              {title}
            </Title>
          </Col>
          
          {excerpt && (
            <Col span={24}>
              <Paragraph 
                ellipsis={{ rows: 3 }} 
                type="secondary"
                className={styles.topicExcerpt}
              >
                {excerpt}
              </Paragraph>
            </Col>
          )}
          
          <Col span={24}>
            <Space size="small" wrap>
              <Tag icon={<RiseOutlined />} color="green">
                热门话题
              </Tag>
              {hotValue > 10000000 && (
                <Tag color="red">爆款潜力</Tag>
              )}
              {commentCount > 100 && (
                <Tag color="blue">讨论热烈</Tag>
              )}
            </Space>
          </Col>
        </Row>
      </div>
    </Card>
  );
};

export default HotTopicCard;